<script setup lang="ts">
import { computed, onMounted } from 'vue'
import AppMenu from './components/AppMenu.vue'
import { isMicroApp, getAppMode } from './utils/microApp'

// 检测是否在微前端环境中运行
const isInMicroApp = computed(() => isMicroApp())

// 计算应用容器样式
const appContainerClass = computed(() => {
  return isInMicroApp.value ? 'app-container-micro' : 'app-container-standalone'
})

onMounted(() => {
  console.log('>>> 子应用B App.vue 组件已挂载 <<<')
  console.log(`子应用 B 当前运行模式: ${getAppMode()}`)
  if (isInMicroApp.value) {
    console.log('在微前端环境中运行，隐藏子应用菜单')
  } else {
    console.log('独立运行，显示子应用菜单')
  }
})
</script>

<template>
  <div :class="appContainerClass">
    <!-- 左侧菜单 - 只在独立运行时显示 -->
    <AppMenu v-if="!isInMicroApp" />

    <!-- 主内容区域 -->
    <div class="main-content">
      <RouterView v-slot="{ Component }">
        <!-- 使用 keep-alive 缓存组件状态 -->
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </RouterView>
    </div>
  </div>
</template>

<style scoped>
/* 独立运行时的布局 */
.app-container-standalone {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 微前端环境中的布局 */
.app-container-micro {
  height: 100vh;
  overflow: hidden;
}

.main-content {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  padding: 20px;
}

/* 微前端环境中主内容区域占满整个容器 */
.app-container-micro .main-content {
  height: 100%;
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 10px;
  }
}
</style>
